<template>
    <div class="madp-dialog-content">
        <el-select :value="value"
                   ref="select"
                   :multiple="multiple"
                   placeholder="请选择部门"
                   @remove-tag="removeTag"
                   :clearable="clearable"
                   @clear="clearHandle">
            <el-option :value="value">
                <el-tree id="tree-option"
                         ref="selectTree"
                         :accordion="accordion"
                         :data="departmentData"
                         :props="defaultProps"
                         show-checkbox
                         :expand-on-click-node="false"
                         :node-key="defaultProps.value"
                         :check-strictly="false"
                         @check="handleNodeClick"
                         @check-change="handleCheckChange"></el-tree>
            </el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    name: "select-department",
    data () {
        return {
            value: this.multiple ? [] : '',
            arr: [],
        }
    },
    props: {
        /*配置选项*/
        defaultProps: {
            type: Object,
            default: () => {
                return {
                    value: "id", // ID字段名
                    label: "label", // 显示名称
                    children: 'children' // 子级字段名
                }
            }
        },
        /*展示数据*/
        departmentData: {
            type: Array,
            default: () => { return [] }
        },
        /* 可清空选项 */
        clearable: {
            type: Boolean,
            default: () => {
                return true;
            }
        },
        /* 自动收起 */
        accordion: {
            type: Boolean,
            default: () => {
                return true;
            }
        },
        /*单选初始值*/
        defaultValue: {
            type: String,
            default: () => {
                return ''
            }
        },
        /*多选初始值*/
        defaultMultipleValue: {
            type: Array,
            default: () => {
                return []
            }
        },
        /*是否多选*/
        multiple: {
            type: Boolean,
            default: () => {
                return false;
            }
        }
    },
    mounted () {
        if (this.multiple) {
            //多选
            this.init();
        } else {
            this.initValue();
        }
    },
    methods: {
        //初始化多选默认值，如果有传递默认值，则回显默认值
        init () {
            //如果有传默认值过来，则渲染到组件中
            if (this.defaultMultipleValue.length > 0) {
                this.$refs.selectTree.setCheckedKeys(this.defaultMultipleValue);
                this.selectedNodes = this.$refs.selectTree.getCheckedNodes();
                this.value = this.selectedNodes.map(item => item[this.defaultProps.label]);
            }
        },
        //初始化单选默认值
        initValue () {
            if (this.defaultValue) {
                this.$refs.selectTree.setCheckedKeys([this.defaultValue]);
                this.selectedNodes = this.$refs.selectTree.getCheckedNodes();
                this.value = this.selectedNodes[0][this.defaultProps.label];
            }
        },
        // 切换选项
        handleNodeClick (node, el) {
            this.selectedNodes = el.checkedNodes;
            if (this.multiple) {
                //多选
                this.value = el.checkedNodes.map(item => item[this.defaultProps.label]);
            } else {
                //单选
                this.value = el.checkedNodes[0][this.defaultProps.label];
                this.$refs.select.blur();
            }
        },
        //移除选项
        removeTag (tag) {
            let arr = this.selectedNodes.filter(item => item[this.defaultProps.label] === tag);
            this.$refs.selectTree.setChecked(arr[0].id, false);
            this.value.splice(this.value.indexOf(tag), 1);
        },
        // 清除选中项
        clearHandle () {
            if (this.multiple) {
                this.value = [];
            } else {
                this.value = '';
            }
            this.$refs.selectTree.setCheckedKeys([]);
        },
        //获取选中id值
        getCheckedKeys () {
            return this.$refs.selectTree.getCheckedKeys()
        },
        handleCheckChange (data, checked) {
            if (!this.multiple && checked === true) {
                // 单选
                this.$refs.selectTree.setCheckedNodes([data]);
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.madp-dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
}

.el-select-dropdown__item.selected {
    font-weight: normal;
}

ul li >>> .el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
}

.el-tree-node__label {
    font-weight: normal;
}

.el-tree >>> .is-current .el-tree-node__label {
    color: #409eff;
    font-weight: 700;
}

.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
    color: #606266;
    font-weight: normal;
}
/deep/.el-select {
    width: 100% !important;
}
/deep/.el-select > .el-input {
    /*width: 100%!important;*/
}
</style>
